<template>
  <div class="tableArea">
    <el-table
        empty
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
          v-if="checkBox"
          type="selection"
          width="25">
      </el-table-column>
      <el-table-column
          v-for="(item, index) in labelMap"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          show-overflow-tooltip
          align="left"
      >
        <template slot-scope="scope">
          <div v-if="item.prop === 'operation' && (scope.row[item.prop])" class="operation">
            <p
                class="operator"
                v-for="(operator, indexOP) in (scope.row[item.prop])"
                :key="indexOP"
                type="text"
                size="small"
                @click.stop="handleOperate(scope.row, operator)"
            >{{ operator || '-' }}
              <span  class="operatorTag" v-show="indexOP !== ((scope.row[item.prop]).length-1)">|</span>
            </p>
<!--            <span   @click.stop="handleOperate(scope.row, operator)">{{ scope.row[item.prop][0] }}</span> |-->
<!--            <span class="operator" @click.stop="handleOperate(scope.row, operator)">{{ scope.row[item.prop][1] }}</span>-->
          </div>
          <span v-else-if="item.prop === 'flag'" class="table-cell__txt">{{ scope.row[item.prop] === '0' ? '√' : '×'}}</span>
          <p v-else-if="item.prop === 'picture'" class="table-cell__txt">
            <img class="imgSize" :src="scope.row[item.prop]">
          </p>
          <span v-else class="table-cell__txt">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          v-if="page > 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      checkBox: {
        type: Boolean,
        default: ()=> false
      },
      tableData: {
        type: Array,
        default: () => []
      },
      labelMap: {
        type: Array,
        default: () => []
      },
      height: {
        type: Number,
        default: 620
      },
      total: {
        required: true,
        type: Number
      },
      page: {
        type: Number,
        default: 1
      },
      limit: {
        type: Number,
        default: 10
      },
      layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
      },
      background: {
        type: Boolean,
        default: true
      },
      autoScroll: {
        type: Boolean,
        default: true
      },
      hidden: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        minWidth: "120px",
        loading: false
      }
    },
    created() {
    },
    methods: {
      handleSelectionChange(val){
        let ids = []
        val.forEach((item)=>{
          ids.push(item.articleid)
        })
        this.$emit('selectIds', ids)
      },
      handleSizeChange(val) {
        this.$emit('pagination', { page: this.currentPage, limit: val })
        // if (this.autoScroll) {
        //   scrollTo(0, 800)
        // }
      },
      handleCurrentChange(val) {
        this.$emit('pagination', { page: val, limit: this.pageSize })
      },
      handleOperate(row, operator) {
        switch (operator) {
          case '编辑':
            this.$emit('edit', row)
            break
          case '删除':
            this.$emit('delete', row)
            break
          case '添加教育经历':
            this.$emit('addEdu',row)
            break
          case '添加发表文章':
            this.$emit('addArt',row)
            break
           case '添加获奖经历':
            this.$emit('addAwa',row)
            break
          case '新增代表性文献':
            this.$emit('addArticle',row)
            break
        }
      },
      getTableData(config) {
        this.$emit('getTableData', config)
      },
    },
    computed: {
      currentPage: {
        get() {
          return this.page
        },
        set() {
          console.log('')
        }
      },
      pageSize: {
        get() {
          return this.limit
        },
        // set(val) {
        //   this.$emit('update:limit', val)
        // }
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>
  .tableArea{
    min-width: 100%;
    margin-top: 20px;
    .operator{
      cursor: pointer;
      display: inline-block;
      .operatorTag{
        margin-right: 5px;
      }
    }
    /deep/ .operation {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    /deep/ .el-table th, .el-table tr {
      background:rgb(235,235,235);
    }

    /deep/ .el-button--medium {
      font-size: 16px;
      color: #D0021B;
      background: #cccccc;
      margin-left: 20px;
      margin-bottom: 10px;
    }
    /deep/ .el-table--enable-row-transition .el-table__body td {
      height: 58px;
    }
    /deep/ .el-table th>.cell {
      text-align: center;
    }
    /deep/ .el-table .cell {
      text-align: center;
      font-size: 16px;
    }
    /deep/ .el-pagination {
      padding: 22px 5px;
      text-align: center;
    }
    .imgSize{
      width: 30px;
      height: 30px;
    }
    .pagination{
      margin-top: 20px;
    }
  }
</style>
